<template>
  <div class="remenxuexiaotuijian">
    <div class="remenxuexiaotuijian_head">热门学校推荐</div>
    <div class="remenxuexiaotuijian_list">
      <LoadingComponent
        v-slot="{ loadingFlag }"
        class="remenxuexiaotuijian_list_li"
        v-for="it in ModHotSpotDates"
        :key="it.hot_id"
      >
        <img
          :src="'http://www.shxw114.com:9527/' + it.hot_nav"
          v-if="loadingFlag"
        />
        <div class="wzycslh">
          <a style="color: green" href="">{{ it.hot_name }}</a>
          <span style="color: #666">|</span>
          <a style="color: #000" href="">{{ it.hot_title }}</a>
        </div>
        <a href=""> 咨询 </a>
      </LoadingComponent>
    </div>
  </div>
</template>
<script setup>
import { ModHotSpotGet } from "../../server/index.js";
import { ref } from "vue";
const ModHotSpotDates = ref({});
(async (v) => {
  const { data } = await ModHotSpotGet();
  ModHotSpotDates.value = data;
})();
</script>
<style scoped>
.remenxuexiaotuijian {
  width: 100%;
  height: auto;
}
.remenxuexiaotuijian_head {
  width: 100%;
  height: 2rem;
  background-color: #fb5757;
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
  font-size: 0.8rem;
  text-align: center;
  line-height: 2rem;
  color: #fff;
  font-weight: 100;
}
.remenxuexiaotuijian_list_li {
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.remenxuexiaotuijian_list_li > img {
  width: 1rem;
  height: 1rem;
}
.remenxuexiaotuijian_list_li > div {
  margin-left: 0.4rem;
  font-size: 0.5rem;
  width: 12rem;
}
.remenxuexiaotuijian_list_li > div > span {
  margin: 0 0.2rem;
}
.remenxuexiaotuijian_list_li > a {
  display: block;
  width: 1.8rem;
  height: 1rem;
  background: rgb(251, 87, 87);
  color: #fff;
  text-align: center;
  line-height: 1rem;
  border-radius: 0.4rem;
  font-size: 0.5rem;
}
</style>